<template lang="html">
  <el-dialog :title="dialogTitle" :append-to-body="true" :close-on-click-modal="false" :show-close="false"
    v-model="dialogVisible" @close="close" width="600px">

    <el-container v-loading="dialogLoading" class="setting-detail-container">
      <el-main>
        <el-form label-width="100px" :model="settingEntity" ref="settingForm" class="edit-pane" :inline="false"
          :rules="settingFormRules">
          <el-form-item label="书源名称" prop="name">
            <el-input v-model="settingEntity.name" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="书源Key" prop="sourceKey">
            <el-input v-model="settingEntity.sourceKey" style="width: 400px" :disabled="isEdit"></el-input>
          </el-form-item>
          <el-form-item label="请求头" prop="header">
            <el-input v-model="settingEntity.header" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="URL" prop="url">
            <el-input v-model="settingEntity.url" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="搜索URL" prop="searchUrl">
            <el-input v-model="settingEntity.searchUrl" style="width: 400px "></el-input>
          </el-form-item>
          <el-form-item label="爬虫规则" prop="spiderRule">
            <el-input v-model="settingEntity.spiderRule" style="width: 400px"></el-input>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="js">
import { ref, inject, defineExpose } from 'vue';
import { ElMessage } from 'element-plus';
import _ from 'lodash';
import { add, modify } from '@/api/bookSourceSetting';
const { onSuccess } = inject('bookSourceSettingProvide');

const dialogVisible = ref(false); // 弹窗是否可见
const dialogLoading = ref(false); // 弹窗加载状态
const isEdit = ref(false); // 是否编辑状态
const dialogTitle = ref(""); // 弹窗标题
const settingForm = ref(null); // 表单
const initSettingEntity = () => {
  return {
    id: '', // 书源ID
    name: '', // 书源名称
    sourceKey: '', // 书源Key
    header: '', // 请求头
    spiderUrl: '', // 爬虫地址
    url: '', // 书源地址
  }
};

const settingEntity = ref(initSettingEntity());
const settingFormRules = {
  name: [
    { required: true, message: '请输入书源名称', trigger: 'blur' },
    { min: 1, max: 100, message: '书源名称长度在 1 到 100 个字符之间', trigger: 'blur' }
  ],
  sourceKey: [
    { required: true, message: '请输入书源Key', trigger: 'blur' },
    { min: 1, max: 50, message: '书源Key长度在 1 到 50 个字符之间', trigger: 'blur' }
  ],
  header: [
    { required: true, message: '请输入请求头', trigger: 'blur' },
  ],
  url: [
    { required: true, message: '请输入书源URL', trigger: 'blur' },
    { type: 'url', message: '书源URL格式不正确', trigger: 'blur' }
  ],
  searchUrl: [
    { required: true, message: '请输入搜索URL', trigger: 'blur' },
    { type: 'url', message: '书源搜索URL格式不正确', trigger: 'blur' }
  ],
  spiderRule: [
    { required: true, message: '请输入爬虫规则', trigger: 'blur' },
  ],
};

/**
 * 关闭弹窗
 */
function close() {
  if (dialogLoading.value) {
    return false;
  }
  dialogVisible.value = false;
  settingEntity.value = initSettingEntity();
}


/**
 * 保存
 */
function save() {
  dialogLoading.value = true;
  saveDebounce();
}


const saveDebounce = _.debounce(() => {
  settingForm.value.validate((vaild) => {
    if (!vaild) {
      dialogLoading.value = false;
      ElMessage.error("数据验证不通过，请检查输入!");
      return;
    }

    let setting = Object.assign({}, settingEntity.value);
    let fun = isEdit.value ? modify : add;
    fun(setting).then((res) => {
      if (res == null || !res.isSuccess) {
        ElMessage.error(res.message || "操作失败");
        return;
      }
      ElMessage.success("保存成功");
      dialogLoading.value = false;
      onSuccess();
      close();
    }).finally(() => {
      dialogLoading.value = false;
    });
  });
}, 500);

/**
 *  打开弹窗
 * @param setting 书源设置项
 */
function open(setting) {
  dialogLoading.value = false;
  if (settingForm.value) {
    settingForm.value.resetFields();
  }
  if (setting && setting.id) {
    isEdit.value = true;
    dialogTitle.value = "编辑书源";
    settingEntity.value = Object.assign({}, setting);
  } else {
    isEdit.value = false;
    dialogTitle.value = "添加书源";
    settingEntity.value = initSettingEntity();
  }

  dialogVisible.value = true;
}

defineExpose({
  openDialog: open,
});

</script>
<style lang="less"></style>
